<template>
  <div>
    <nav-bar title="安全学习"></nav-bar>
    <div class="signIn maxinBox">
      <van-tabs type="card" v-model="active" @click="onClick" v-if="isShowTest">
        <van-tab title="基础知识">
          <div style="margin-top: 0.3125rem;font-size: 0.875rem;">
            <div v-for="(item, index) in signList.list" :key="index" v-show="signList.fileType === 1" style="padding: 0 0.9375rem;">
              <h4>{{item.title}}</h4>
              <p class="content" v-html="item.content"></p>
            </div>
          </div>
        </van-tab>
        <van-tab title="工种知识">
          <div style="margin-top: 0.3125rem;font-size: 0.875rem;">
            <div v-for="(item, index) in signWorkType.list" :key="index" v-show="signList.fileType === 1" style="padding: 0 0.9375rem;">
              <h4>{{item.title}}</h4>
              <p class="content" v-html="item.content"></p>
            </div>
           <!-- <div class="test backgroundfff marginTop5" v-for="(item, index) in signWorkType.list" :key="index" v-show="signList.fileType === 2">
              <div>
                <p>{{index + 1}}.{{item.title}}</p>
                <van-radio-group v-model="item.answerItem" direction="horizontal">
                  <van-radio v-for="(itemAnswer, indexAnswer) in item.answerVoList" :key="indexAnswer" :name="itemAnswer.name" :disabled="item.isDisabled">
                    <span :class="item.showCorrect ? 'green' : 'red'">
                      <div>{{itemAnswer.name}}.{{itemAnswer.content}}</div>
                    </span>
                  </van-radio>
                </van-radio-group>
              </div>
              <van-row style="border-top: 0.0625rem solid #E6E6E6;padding-top: 0.625rem;" v-if="item.isShow">
                <van-col :span="12">
                  <div style="color: red;">答案提示：{{item.answer}}</div>
                </van-col>
                <van-col :span="12" style="text-align: right;">
                  <van-button round plain hairline size="small" type="default" @click="hintAnswer(item)">提示答案</van-button>
                </van-col>
              </van-row>
              <van-row style="border-top: 0.0625rem solid #E6E6E6;padding-top: 0.625rem;" v-else>
                <van-col :span="24" style="text-align: right;">
                  <van-button round plain hairline size="small" type="default" @click="hintAnswer(item)">提示答案</van-button>
                </van-col>
              </van-row>
            </div> -->
          </div>
        </van-tab>
        <div v-if="isShowTest">
          <p class="signIn" v-show="showSignInFinish" @click="onSignIn">
            学习签到
          </p>
          <p class="signInFinish" v-show="showSignIn">
            今日已签到
          </p>
          <p class="countdown" v-show="!showSignIn && !showSignInFinish">
            剩余学习时间：
            <van-count-down millisecond style="display: inline-block;" :time="remainTime" format="mm:ss:SS" @finish="timeFinish(remainTime)" @change="changeTime" />
          </p>
        </div>
      </van-tabs>
      <div v-else>
        <div class="test backgroundfff marginTop5" v-for="(item, index) in signList.list" :key="index" v-show="signList.fileType === 2">
          <div>
            <p>{{index + 1}}.{{item.title}}</p>
            <van-radio-group v-model="item.answerItem" direction="horizontal">
              <van-radio v-for="(itemAnswer, indexAnswer) in item.answerVoList" :key="indexAnswer" :name="itemAnswer.name" :disabled="item.isDisabled">
                <span :class="item.showCorrect ? 'green' : 'red'">
                  <div>{{itemAnswer.name}}.{{itemAnswer.content}}</div>
                </span>
              </van-radio>
            </van-radio-group>
          </div>
          <van-row style="border-top: 0.0625rem solid #E6E6E6;padding-top: 0.625rem;" v-if="item.isShow">
            <van-col :span="12">
              <div style="color: red;">答案提示：{{item.answer}}</div>
            </van-col>
            <van-col :span="12" style="text-align: right;">
              <van-button round plain hairline size="small" type="default" @click="hintAnswer(item)">提示答案</van-button>
            </van-col>
          </van-row>
          <van-row style="border-top: 0.0625rem solid #E6E6E6;padding-top: 0.625rem;" v-else>
            <van-col :span="24" style="text-align: right;">
              <van-button round plain hairline size="small" type="default" @click="hintAnswer(item)">提示答案</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import signInAPI from '../../../api/workAPI/signInAPI.js'
  export default {
    data() {
      return {
        // getTimes: 0,
        isShowTest: false,
        active: 0,
        remainTime: 0,
        signList: [],
        signWorkType: [],
        showSignIn: false,
        timeResult: '',
        times: '',
        showSignInFinish: false
      }
    },
    // watch:{
    //   getTimes(newval, oldval) {
    //     console.log(newval)
    //     if (newval === '111') {
    //       console.log('hehe')
    //       signInAPI.addSignTime(this.times)
    //     } else {
    //       console.log('hello')
    //     }
    //   }
    // },
    methods:{
      // 答案提示
      hintAnswer(item) {
        this.$set(item, 'isShow', true)
      },
      // 查询该用户是否已经签到
      getIsSignIn() {
        signInAPI.getIsSignIn().then(res => {
          this.timeResult = res.result
          if (res.result === 'no') {
            signInAPI.getSignTime().then(res => {
              if (JSON.parse(res) && JSON.parse(res).restTime && JSON.parse(res).restTime === 0) {
                this.showSignInFinish = true
                this.showSignIn = false
              } else {
                this.showSignInFinish = false
                this.showSignIn = false
                this.getSignInTime()
              }
            })
          } else {
            this.showSignIn = true
          }
        })
      },
      // 点击签到
      onSignIn() {
        signInAPI.stydySignIn().then(res => {
          this.$dialog.alert({
            message: '签到成功',
          }).then(() => {
            this.showSignIn = true
          });
        })
      },
      // 倒计时结束
      timeFinish() {
        if (this.timeResult !== '' && !this.showSignIn) {
          this.showSignInFinish = true
        }
      },
      // 切换tab
      onClick() {
        this.getSignIn()
      },
      // 获取学习内容
      getSignIn() {
        signInAPI.getSignIn({
          workType: this.active
        }).then(res => {
          if (res.fileType === 2) {
            this.signList = res
            this.signWorkType = res
            this.isShowTest = false
          } else {
            this.isShowTest = true
            if (this.active === 0) {
              this.signList = res
            } else {
              this.signWorkType = res
            }
          }
        })
      },
      changeTime(val) {
        this.times = val.minutes * 60 * 1000 + val.seconds * 1000 + val.milliseconds
        // eventBus.$on('getMac', function(val) {
        //   console.log(this.times)
        //   if (val === '111') {
        //     signInAPI.addSignTime(this.times)
        //   }
        // })
      },
      // 获取学习时长
      getSignInTime() {
        signInAPI.signInTime().then(res => {
          this.remainTime = res.time * 60 * 1000
        })
      }
    },
    destroyed() {
      signInAPI.addSignTime(this.times)
    },
    // created() {
    //   // this.getIsSignIn()
    //   // this.getSignIn()
    //   eventBus.$on('getMac', function(val) {
    //     console.log(val, '11111111111')
    //     this.getTimes = val
    //     if (val === '111') {
    //       console.log(val, 'hh')
    //       signInAPI.addSignTime(this.times)
    //     } else {
    //       console.log(val, 'hhss')
    //       signInAPI.getSignTime().then(res => {
    //         if (JSON.parse(res).restTime) {
    //           console.log('无数据')
    //           this.remainTime = JSON.parse(res).restTime
    //         } else {
    //           console.log('倒计时成功')
    //           signInAPI.signInTime().then(res => {
    //             this.remainTime = res.time * 60 * 1000
    //           })
    //         }
    //       })
    //     }
    //   })
    // },
    mounted() {
      // eventBus.$on('getMac', function(val) {
      //   if (val === '222') {
      //     signInAPI.getSignTime().then(res => {
      //       if (JSON.parse(res) && JSON.parse(res).restTime) {
      //         this.remainTime = JSON.parse(res).restTime
      //       } else {
      //         this.getSignInTime()
      //       }
      //     })
      //   }
      // })
      signInAPI.getSignTime().then(res => {
        if (JSON.parse(res) && JSON.parse(res).restTime) {
          this.remainTime = JSON.parse(res).restTime
        } else {
          this.getSignInTime()
        }
      })
      this.getIsSignIn()
      this.getSignIn()
    }
  }

</script>

<style scoped lang="scss">
  /deep/ .content p img{
    width: 100%;
  }
  .test{
    padding: 0.9375rem;
    .van-radio-group{
      padding: 0 1.25rem;
      .van-radio{
        width: 100%;
        margin-bottom: 0.3125rem;
        margin-right: 1.25rem;
      }
    }
  }
  .signIn{
    /deep/ .van-tabs{
      margin-bottom: 4 * $spacing;
    }
    /deep/ .van-tabs__wrap{
      height: 2.75rem;
      line-height: 2.75rem;
      .van-tabs__nav--card{
        border: inherit;
        margin: inherit;
        .van-tab.van-tab--active{
          background-color: #fff;
          color: #1577FF;
        }
        .van-tab{
          border: inherit;
          height: 2.75rem;
          line-height: 2.75rem;
          color: #999;
          background-color: #EBEBEB;;
        }
      }
    }

    h3{
      text-align: $center;
    }
    .signIn{
      position: fixed;
      bottom: 0;
      left: 10%;
      width: 80%;
      border-radius: 1.25rem;
      padding: 0.625rem 0;
      color: #fff;
      text-align: center;
      font-size: 0.75rem;
      background: #358AFF;
    }
    .signInFinish{
      position: fixed;
      bottom: 0;
      left: 10%;
      width: 80%;
      border-radius: 1.25rem;
      padding: 0.625rem 0;
      color: #fff;
      text-align: center;
      font-size: 0.75rem;
      background: #44b4d6;
    }
    .countdown{
      position: fixed;
      bottom: 0;
      left: 10%;
      width: 80%;
      border-radius: 1.25rem;
      padding: 0.625rem 0;
      color: #fff;
      text-align: center;
      font-size: 0.75rem;
      background: #44b4d6;

      /deep/ .van-count-down{
        color: $color;
      }
    }
  }
</style>
